import React, { Component } from 'react'
import { connect } from 'react-redux'
import '../css/homes.css'
export class Homes extends Component {
    state={
        val:"i"
    }
    render() {
        let {list,add}=this.props
        let {val}=this.state
        return (
            <div className="box">
                <input type="text" value={val}  onChange={(e)=>{
                    this.setState({
                        val:e.target.value
                    })
                }}/>
                {
                    list.map((item,index)=>{
                        return item.name.indexOf(val) ?<ul key={index}>
                            <li onClick={()=>{
                                this.props.history.push('/xiang',item)
                            }}><img src={item.img}/><span>{item.name}</span></li>
                            <button onClick={()=>{
                                add(item.id,item)
                            }}>加入购物车</button>
                        </ul>:""
                    })
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    let {list}=state
    return{
        list
    }
}

const mapDispatchToProps =(dispatch)=>{
    return{
       add(id,item){
           dispatch({type:'ADD',id,item})
       }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Homes)
